<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-shrink防止收缩</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .main {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    .flex-wrapper {
      display: flex;
      height: 100px;
      
      gap: 20px;
      padding: 10px;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-radius: 8px;
    }
    #box {
      display: flex;
      height: 200px;
    }
    .form-item {
      border: 2px solid #039145;
      width: 500px;
      height: 50px;
      border-radius: 8px;
    }
    #box-form {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 10px;
    }
    #wh-input {
      height: 30px;
      /*min-width: 0;*/
      flex: 1 1;
      border: 0;
      border-bottom: 1px solid #999999;
    }
    
    #box1 {
      height: 250px;
    }
    #box-form1 {
      display: flex;
      gap: 20px;
      height: 250px;
      padding: 10px;
      border: 2px solid #039145;
    }
    .text {
      border: 1px solid #999;
      display: flex;
    }
    .text-left {
      flex: 1 1;
      flex-basis: 400px;
    }
    .text-right {
      flex: 1 1;
      flex-basis: 170px;
    }
  </style>
</head>
<body style="display: flex;">
  <div class="main">
    <div class="flex-wrapper" id="box">
      <h2>改变input的min-width值，观察宽度变化</h2>
      <div class="form-item">
        <form action="" id="box-form">
          <label for="wh-input">搜索：</label>
          <input type="text" id="wh-input" placeholder="请输入搜索内容" />
        </form>
      </div>
      <form action="" class="form-content">
        <div>
          <span>min-width:</span>
          <input type="radio" id="radio" checked name="min-width" value="auto" /><label for="radio">默认（auto）</label>
          <input type="radio" id="radio2" name="min-width" value="0" /><label for="radio2">0</label>
        </div>
        <label>
          <input id="range" type="range" min="150" max="500" value="500" style="width: 300px;" />
          <span id="rangeValue">500px</span>
        </label>
      </form>
    </div>
    
   
  </div>
  <div class="main">
    <h2>中文没有长单词，找个长英文的看效果。</h2>
    <div class="flex-wrapper" id="box1">
      <div id="box-form1">
        <div class="text text-left">The longest word in this item is “sesquipedalian”.</div>
        <div class="text text-right">This one has no long words.</div>
      </div>
      <form action="" class="form-content">
        <div>
          <span>min-width:</span>
          <input type="radio" id="radio1" checked name="min-width1" value="auto" /><label for="radio1">默认（auto）</label>
          <input type="radio" id="radio11" name="min-width1" value="0" /><label for="radio11">0</label>
        </div>
        <label>
          <input id="range1" type="range" min="150" max="500" value="500" style="width: 300px;" />
          <span id="rangeValue1">500px</span>
        </label>
      </form>
    </div>
    
    
  </div>
 
 
  
  <script>
    window.onload = function () {
      const boxDom = document.querySelector('.form-item');
      const rangeDom = document.querySelector('#range');
      const rangeValueDom = document.querySelector('#rangeValue');
      const radioDom = document.querySelectorAll('input[name="min-width"]');
      const whInputDom = document.querySelector('#wh-input');
      radioDom.forEach(function (item) {
        item.addEventListener('change', function () {
          const minWidth = this.value;
          whInputDom.style.minWidth = minWidth;
        })
      })
      
      rangeDom.addEventListener('input', function () {
        const width = this.value;
        boxDom.style.width = width + 'px';
        rangeValueDom.innerHTML = width + 'px';
      })
      
      const boxDom1 = document.querySelector('#box-form1');
      const rangeDom1 = document.querySelector('#range1');
      const rangeValueDom1 = document.querySelector('#rangeValue1');
      const radioDom1 = document.querySelectorAll('input[name="min-width1"]');
      const leftTextDom1 = document.querySelector('.text-left');
      const rightTextDom1 = document.querySelector('.text-right');
      radioDom1.forEach(function (item) {
        item.addEventListener('change', function () {
          const minWidth = this.value;
          leftTextDom1.style.minWidth = minWidth;
          rightTextDom1.style.minWidth = minWidth;
        })
      })
      
      rangeDom1.addEventListener('input', function () {
        const width = this.value;
        boxDom1.style.width = width + 'px';
        rangeValueDom1.innerHTML = width + 'px';
      })
   
    }
  </script>
</body>
</html>